<template>
  <a-divider>HABIT</a-divider>
    <HabitList :habit-list="habitList" :init-loading="initLoading" @update="updateList"/>
    <calendar-heatmap :values="dateData" :round="5" tooltip-unit="record" :end-date="endDate" style="width: 60vw;height: 30vh;margin:0 auto"/>
  <a-modal v-model:open="open" title="CREATE HABIT" @ok="handleOk" :confirm-loading="confirmLoading">
    <a-form :model="createHabit" :label-col="labelCol" :wrapper-col="wrapperCol" >
      <a-form-item label="标题">
        <a-input v-model:value="createHabit.title" />
      </a-form-item>
      <a-form-item label="此习惯的说明">
        <a-textarea v-model:value="createHabit.habitProfile" />
      </a-form-item>
      <a-form-item label="结束时间">
        <a-date-picker v-model:value="endTime" :disabled-date="disabledDate"/>
      </a-form-item>
    </a-form>
  </a-modal>
  <a-float-button
      tooltip="新建HABIT"
      type="primary"
      :style="{
      right: '15vw',
      top:'13vh'
    }"
      @click="showModal"
  >
    <template #icon>
      <plus-outlined/>
    </template>
  </a-float-button>
</template>

<script setup>
import {onMounted, ref} from "vue";
import {PlusOutlined} from "@ant-design/icons-vue";
import HabitList from "./HabitList.vue";
import myAxios from "../axios.js";
import {getStartDateOfNextYear} from "../constant/DateUtils.js";
import {message} from "ant-design-vue";
import dayjs from "dayjs";
const searchText = ref('');
const confirmLoading =ref(false)
const open =ref(false)  ;
const endTime = ref();
const createHabit = ref({
  title: '',
  habitProfile: '',
})
const disabledDate = current => {
  // Can not select days before today and today
  return current && current < dayjs().endOf('day');
};
const showModal = () => {
  open.value = true;
};
const labelCol = {
  style: {
    width: '150px',
  },
};
const wrapperCol = {
  span: 14,
};
const handleOk = () => {
  let status = false;
  let submitData = {
    title: createHabit.value.title,
    habitProfile:createHabit.value.habitProfile,
    endTime: null
  }
  if(endTime.value !== undefined){
    submitData.endTime = endTime.value.format('YYYY-MM-DD');
  }
  let msg = '';
  myAxios.post('/habit/create',submitData).then(
      res => {
        if(res.code === 0){
          status = true;
        }
        else{
          msg = res.message;
        }
      }
  ).catch(error => {
    console.log("新建HABIT出现错误",error);
  })
  confirmLoading.value = true;
  setTimeout(()=>{
    if(status){
      getHabitList();
      open.value = false;
      createHabit.title ='';
      createHabit.habitProfile = '';
      endTime.value = null;
      message.success('添加成功')
    }else{
      confirmLoading.value = false;
      endTime.value = null;
      message.error(msg);
    }
  },2000)
};
const updateList = () => {
  getHabitList();
  getSummary();
}
const getSummary = ()=>{
  myAxios.get('/habit/summary').then(
      res => {
        if(res.code === 0){
          dateData.value = res.data;
        }
      }
  ).catch(
      error => {
        console.log(error);
      }
  )
}
const habitList = ref([]);
const initLoading = ref(false);
const getHabitList = (searchText) => {
  let url = '/habit/list?searchText=';
  if(searchText!== undefined && searchText!==''){
    url += searchText
  }
  myAxios.get(url).then(
      res => {
        if(res.code === 0){
          habitList.value = res.data;
          message.success('加载成功')
        }else{
          message.error('加载失败');
        }
      }
  ).catch(
      error => {
        console.log(error + "习惯数据库请求出错了");
      }
  ).finally(
      ()=>{
        initLoading.value = false;
      }
  )
}
onMounted(()=> {
  getSummary();
  getHabitList();
})
const endDate = getStartDateOfNextYear();
const dateData = ref([
  {
    date: "2023-07-09",
    count: 1
  },
  {
    date: "2023-07-19",
    count: 1
  },
  {
    date: "2023-07-16",
    count: 1
  },
  {
    date: "2023-08-08",
    count: 1
  },
  {
    date: "2023-08-16",
    count: 6
  },

])

</script>

<style scoped>

</style>